<template>
  <div class="app">
    <div class="block">
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="item in imgList" :key="item">
          <h3 class="medium">
            <el-image   :src="item" ></el-image>
          </h3>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div >
      <el-row :gutter="20">
        <el-col :span="18">
            <el-divider>推荐</el-divider>
            <RecommendHotComponent :page-size="10"/>
        </el-col>
        <el-col :span="6">
          <el-divider>偏好</el-divider>
          <HobbyComponent v-if="getUser!=null"/>
          <el-divider>书架</el-divider>
          <bookshelf-component v-if="getUser!=null"/>
          <div v-if="getUser==null" style="width: 100%;text-align: center">
            <h1>请登录</h1>
          </div>
        </el-col>
      </el-row>
    </div>

  </div>

</template>

<script>
import HobbyComponent from "@/components/content/HobbyComponent";

export default {
  name: "HomePageContentComponent",
  props: {},
  data() {
    return {
      imgList:[
        require("@/assets/1.png"),
        require("@/assets/2.png"),
        require("@/assets/3.png"),
        require("@/assets/4.png"),
        require("@/assets/5.png")
      ]
    }
  }, methods: {}, watch: {}, computed: {
    getUser:{
      get(){
        return this.$store.getters.getUser;
      },
      set(value){
        return this.$store.commit("setUser",value);
      }
    },
    bookshelf() {
      return this.getUser.bookshelf;
    }
  },components:{
    RecommendHotComponent,
    HobbyComponent,
    BookshelfComponent
  }
}
import BookshelfComponent from './BookshelfComponent'
import RecommendHotComponent from "@/components/book/hot/RecommendHotComponent";
</script>

<style scoped>
img{
  object-fit: fill;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  /*line-height: 200px;*/
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>